<template>
	<view class="content">
		<!-- <view class="navbar">
			<view 
				v-for="(item, index) in navListTab" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.name}}
			</view>
			
		</view> -->
		<view class="navbar-two">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentTwoIndex === index}"
			 @click="tabClickTwo(index)">
				{{item.text}}
			</view>
		</view>

		<swiper :current="tabCurrentTwoIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadNextPage">
					<!-- 空白页 -->
						<empty v-if="tabItem.loaded === true && tabItem.hiddenPage==true"></empty>

					<!-- 订单列表 -->
					<view class="" >

						<view v-for="(item,index) in tabItem.orderAllList" :key="index" class="order-item">
							<view class="i-top b-b">
								<view class="g-header" @click="navTo('storeDetailShop',tabItem.orderAllList[index][0].shopId)">
									<image class="logo" src="../../static/home/order/store.png" mode="widthFix"></image>
									<text class="name">{{tabItem.orderAllList[index][0].shopName}}</text>
									<text class="yticon icon-you" style="margin-top: 4rpx;"></text>
								</view>
								<text class="state" v-if="tabItem.orderAllList[index][0].orderStatus==-1">交易关闭</text>
								<text class="state" v-else-if="tabItem.orderAllList[index][0].orderStatus==0">待付款</text>
								<text class="state" v-else-if="tabItem.orderAllList[index][0].orderStatus==1">已付款</text>
								<text class="state" v-else-if="tabItem.orderAllList[index][0].orderStatus==2">已发货</text>
								<text class="state" v-else-if="tabItem.orderAllList[index][0].orderStatus==3">交易成功</text>
								<text class="state" v-else-if="tabItem.orderAllList[index][0].orderStatus==4">已评价</text>
							</view>
							<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item" :key="goodsIndex" @click="navTo('orderDetail',goodsItem.shopId,goodsItem.orderNumber)">
								<image class="goods-img" :src="goodsItem.goodsPic" mode="aspectFill"></image>
								<view class="right">
									<text class="title clamp">{{goodsItem.goodsTitle}}</text>
									<text class="attr-box">{{goodsItem.goodsSpecText}} x {{goodsItem.goodsNumber}}</text>
									<text class="price">{{(goodsItem.goodsPrice/goodsItem.goodsNumber) | money}}</text>
								</view>
							</view>

							<view class="price-box">
								共
								<text class="num">{{tabItem.orderAllList[index][0].goodsNumber}}</text>
								件商品 实付款
								<text class="price">{{tabItem.orderAllList[index][0].goodsPrice/100}}</text>
							</view>
							<view class="action-box b-t" v-if="tabItem.orderAllList[index][0].orderStatus==-1">
								<button class="action-btn recom">删除订单</button>
							</view>
							<view class="action-box b-t" v-else-if="tabItem.orderAllList[index][0].orderStatus==0">
								<button class="action-btn" @click="cancelOrder(tabItem.orderAllList[index][0].shopId,tabItem.orderAllList[index][0].orderNumber,'show')">取消订单</button>
								<button class="action-btn recom" @click="navTo('orderDetail',tabItem.orderAllList[index][0].shopId,tabItem.orderAllList[index][0].orderNumber)">去支付</button>
								
							</view>
							<view class="action-box b-t" v-else-if="tabItem.orderAllList[index][0].orderStatus==1">
								
								<button class="action-btn recom">提醒发货</button>
							</view>
							<view class="action-box b-t" v-else-if="tabItem.orderAllList[index][0].orderStatus==2">
								<button class="action-btn" @click="cancelOrder(tabItem.orderAllList)">查看物流</button>
								<button class="action-btn recom" @click="sureShouShop(tabItem.orderAllList[index][0].shopId,tabItem.orderAllList[index][0].orderNumber,tabItem.orderAllList[index][0].cid)">确认收货</button>
							</view>
							<view class="action-box b-t" v-else-if="tabItem.orderAllList[index][0].orderStatus==3">
								<button class="action-btn recom" @click="rate(tabItem.orderAllList[index][0].orderNumber,tabItem.orderAllList[index][0].cid)">去评价</button>
							</view>
							<view class="action-box b-t" v-else-if="tabItem.orderAllList[index][0].orderStatus==4">
								
							</view>
						</view>
					</view>


				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="cancle-title">
					<view class="info">
						<text class="">取消订单</text>
						<image src="../../static/useCenter/delete-img.png" mode="widthFix" @click="toggleMask"></image>
					</view>
					<view class="color999 font28">
						请选择取消订单的原因
					</view>
				</view>
				<radio-group @change="radioChange">
					<view class="yt-list">
						<label class="yt-list-cell " v-for="(item, index) in items" :key="item.value">
							<text class="cell-tit ">{{item.name}}</text>
							<view>
								<radio color="rgba(255, 94, 0, 1)" :value="item.value" :checked="index === current" />
							</view>
						</label>
					</view>
				</radio-group>
				<view class="sure-cancle" @click="sureCancle()">
					确认取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				tabCurrentTwoIndex: 0,
				navListTab: [{
					name: '商城物流'
				}, {
					name: '餐饮退订'
				}, {
					name: '退款售后'
				}],
				maskState: 0,
				navList: [{
						state: 0,
						text: '全部',
						orderAllList: {},
						hiddenPage:true
					},
					{
						state: 1,
						text: '待付款',
						orderAllList: {},
						hiddenPage:true
					},
					{
						state: 2,
						text: '待发货',
						orderAllList: {},
						hiddenPage:true
					},
					{
						state: 3,
						text: '待收货',
						orderAllList: {},
						hiddenPage:true
					},
					{
						state: 4,
						text: '待评价',
						orderAllList: {},
						hiddenPage:true
					}
				],
				items: [{
						value: '0',
						name: '我不想买了'
					},
					{
						value: '1',
						name: '地址信息填写错误'
					},
					{
						value: '2',
						name: '商品无货'
					},
					{
						value: '3',
						name: '其他原因'
					},
				],
				orderAllListOld: [], //临时存储数据
				loadingType: 'noMore', //
				hiddenMore: false, //隐藏更多控件
				pageNo: 1, //当前页
				pageNos: 0,
				// hiddenPage: true,
				cancleObj: {}
			};
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			console.log(11)
			this.loadData();
			this.pageNo = 1
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(options) {
			
		},
		onShow(){
			this.loadData()
		},
		methods: {
			//获取订单列表
			loadData(source) {

				let that = this;
				let nvaList = that.navList;
				let navItem = nvaList[that.tabCurrentTwoIndex];
				let indexSort = 0;
				if(that.tabCurrentTwoIndex==0){
					indexSort = 5;
				}else if(that.tabCurrentTwoIndex==1){
					indexSort = 0;
				}else if(that.tabCurrentTwoIndex==2){
					indexSort = 1;
				}else if(that.tabCurrentTwoIndex==3){
					indexSort = 2;
				}else if(that.tabCurrentTwoIndex==4){
					indexSort = 3;
				}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				uni.showLoading({
					title: '加载中',
				})
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderList,
						data: {
							orderStatus: indexSort,
							pageNumber: that.pageNo,
							pageSize: 10
						}
					})
					.then(result => {
						uni.hideLoading()
						let _data = result.data;
						if (_data.code === 200) {
							if (that.pageNo <= 1) {
								if(_data.result.dataList.length==0){
									navItem.hiddenPage = true;
								}else{
									navItem.hiddenPage = false;
								}
								that.orderAllListOld = _data.result.dataList;
							} else {
								that.orderAllListOld = that.orderAllListOld.concat(_data.result.dataList);
							}
							console.log(_data.result)
							that.pageNos = _data.result.totalPage;
							that.pageNo = _data.result.currentPage;
							let orderAllList = navItem.orderAllList;
							orderAllList={}
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, 'loaded', true);
							// console.log(navItem)
							that.orderAllListOld.forEach(item => {
								
								if (!orderAllList[item.orderNumber]) {
									orderAllList[item.orderNumber] = [item];
								} else {
									orderAllList[item.orderNumber].push(item)
								}
								navItem.orderAllList = orderAllList;
							})
							
							that.navList = nvaList
						}
					})
			},
			/**
			 * 获取下一页
			 */
			loadNextPage() {
				let that = this;
				if (that.pageNo >= that.pageNos) {
					that.hiddenMore = true;
					return;
				}
				//加载我的订单
				that.pageNo = that.pageNo + 1;
				that.loadData();
			},
			
			navTo(url, id, orderNumber) {
				if (url == 'storeDetailShop') {
					this.$Router.push({
						name: url,
						params: {
							shopId: id
						}
					})
				} else {
					this.$Router.push({
						name: url,
						params: {
							shopId: id,
							orderNumber: orderNumber
						}
					})
				}

			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentTwoIndex = e.target.current;
				this.pageNo = 1;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {

				this.tabCurrentIndex = index;
				this.tabCurrentTwoIndex = 0
			},
			//顶部tab点击
			tabClickTwo(index) {
				this.tabCurrentTwoIndex = index;
				this.pageNo = 1;
				
			},
			//删除订单
			deleteOrder(index) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			//取消订单
			cancelOrder(shopId, orderId, type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;

				setTimeout(() => {
					this.maskState = state;
				}, timer)
				this.cancleObj['orderNumber'] = orderId;
				this.cancleObj['shopId'] = shopId;

			},
			radioChange(evt) {
				let that = this;
				for (let i = 0; i < that.items.length; i++) {
					if (that.items[i].value === evt.target.value) {
						that.current = i;
						break;
					}
				}
				that.cancleObj['reason'] = that.items[that.current].name;
			},
			
			sureCancle() {
				let that = this;
				// let nvaList = that.navList;
				// let navItem = nvaList[that.tabCurrentTwoIndex];
				// let orderList = navItem.orderAllList
				// for(var i in orderList){
				// 	if(that.cancleObj['orderNumber']==i){
				// 		console.log(1)
				// 		orderList[i][0].orderStatus= 5;
				// 	}
				// }
				// that.navList = nvaList
				that.maskState = 0;
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderCancle,
						data: that.cancleObj
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.loadData();
							that.$api.msg('取消成功');
						}
					})
			},
			sureShouShop(shopId,orderNum,cid){
				let that = this;
				uni.showModal({
					content: '确认收货吗',
					success: function(res) {
						if (res.confirm) {
							that.$http.request({
									method: 'PUT', // 请求方法必须大写
									url: that.$requestApi.orderConfirm+"/"+shopId+"/"+orderNum,
									data:{}
								})
								.then(result => {
									let _data = result.data;
									if (_data.code === 200) {
										that.$api.msg('确认收货成功');
										that.$Router.push({name:'rate',params:{orderId:orderNum,cid:cid}})
									}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			stopPrevent() {},
			rate(orderId,cid){
				this.$Router.push({name:'rate',params:{orderId:orderId,cid:cid}})
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '待发货';
						break;
					case 9:
						stateTip = '订单已关闭';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 120upx);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar-two {
		display: flex;
		height: 120upx;
		padding: 0 30upx;
		background: #fff;
		position: relative;
		align-items: center;
		justify-content: space-between;
		z-index: 1;

		.nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50upx;
			width: 120upx;
			font-size: 24upx;
			color: #8E8E93;
			border: 1upx solid rgba(112, 112, 112, 1);
			border-radius: 40upx;
			position: relative;

			&.current {
				background: rgba(255, 215, 193, 1);
				color: #FF5E00;
				border: 1px solid rgba(255, 93, 0, 1);
			}
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0px 10upx 20upx rgba(0, 0, 0, 0.04);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #8E8E93;
			position: relative;

			&.current {
				color: #0B0E11;
				font-weight: bold;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #FF2300;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.g-header {
				flex: 1;
				display: flex;
				position: relative;
				align-items: center;

				image {
					width: 32upx;
					height: auto;
					margin-right: 10rpx;
				}
			}

			.time {}

			.state {
				color: #FF5E00;

			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: 34upx;
					color: #FE2130;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: 34upx;
				color: #FE2130;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				color: #FF5D00;

				&:after {
					border-color: #FF5D00;
				}
			}
		}
	}

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			max-height: 70vh;
			background: #fff;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
			border-radius: 30upx 30upx 0 0;
			padding: 60upx 0 0 0;

			.sure-cancle {
				width: 690upx;
				margin: 40upx auto;
				background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
				text-align: center;
				height: 70upx;
				line-height: 70upx;
				border-radius: 40upx;
				font-size: 36upx;
				color: #fff;
			}

			.cancle-title {
				position: relative;
				padding: 0 30upx;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 42upx;
						height: auto;
						margin-right: 10upx;
					}
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 30upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}


		.title {
			font-size: 26upx;
			color: #0B0E11;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #0B0E11;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-8e8;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		.store {
			width: 150upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			font-size: 24upx;
			color: #fff;
			border-radius: 4upx;
			background-color: #FF5E00;
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.pay-price {
			font-size: 34upx;
			color: #FE2130;
		}
	}
</style>
